<template>
  <div id="equipmentStatus">
    <el-row>
      <el-col :span="4">
        <el-tree :data="tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-row>
          <el-input
            class="search-inp"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="search">
          </el-input>
        </el-row>
        <el-row>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              v-for="head in tableHead"
              :key="head.prop"
              :prop="head.prop"
              :label="head.label"
              :width="head.width">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态">
              <template slot-scope="scope">
                <span class="disc" :class="statusMap.find(x=>x.key==scope.row.status).className"></span>
                <span>{{statusMap.find(x=>x.key==scope.row.status).value}}</span>
              </template>
            </el-table-column>
          </el-table>

        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { statusMap } from '@/assets/js/mapCodes'
import { tableHead } from '@/assets/js/tableHeads'
import { machineList } from '@/assets/js/api'
import { tree,tableData } from '@/assets/js/mock'
export default {
  name:'equipmentStatus',
  data () {
    return {
      tree,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      search: '',
      tableHead,
      tableData,
      statusMap
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    async machineList() {
      let res = await machineList(this.$axios,{})
      console.log(res)
    }
  },
  created() {
    // this.machineList()
  }

}
</script>

<style lang="less">
.search-inp {
  width: 260px;
}
</style>